<template>
  <inline-Modal :visible="visible">
    <div class="wrapPage-container">
      <!-- 查询条件 -->
      <div class="search-condition-warp">
        <div class="condition-warp">
          <!--项目 图纸管理、深化设计、竣工阶段设计管理 -->
          <a-tree-select
            v-if="[0, 8, 9].includes(moduleSource()) && pageOperate == 1"
            style="width: 350px"
            v-model="condition.proCode"
            show-search
            placeholder="请选择项目"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear
            tree-default-expand-all
            :loading="condition.treeLoading"
            treeNodeFilterProp="title"
            :replaceFields="{
              children: 'child',
              title: 'orgName',
              key: 'id',
              value: 'orgCode',
            }"
            :tree-data="condition.treeData"
            @change="tenantChange"
          >
          </a-tree-select>
          <!-- 项目   工程勘察、方案设计、初步设计、施工图设计、专项设计-->
          <a-select
            v-if="[1, 2, 3, 4, 5].includes(moduleSource()) && pageOperate == 1"
            v-model="condition.proCode"
            placeholder="请选择项目"
            class="project-select"
            @change="tenantChange"
            showSearch
            allowClear
            :filter-option="filterOption"
          >
            <a-select-option
              :value="item.proCode"
              v-for="item in condition.treeData"
              :key="item.uuid"
            >
              {{ item.proName }}
            </a-select-option>
          </a-select>
          <!--  -->
          <template v-if="pageOperate != 1">
            <a-input
              allowClear
              placeholder="请输入文件名称"
              v-model="condition.fileName"
              style="width: 180px"
            >
            </a-input>
            <a-range-picker
              format="YYYY-MM-DD HH:mm:ss"
              v-model="condition.date"
              :show-time="{
                hideDisabledOptions: true,
                defaultValue: [
                  moment('00:00:00', 'HH:mm:ss'),
                  moment('11:59:59', 'HH:mm:ss'),
                ],
              }"
            />
            <a-input
              placeholder="请输入上传人"
              style="width: 180px"
              v-model="condition.creator"
            />
          </template>
        </div>
        <div class="button-warp" v-if="pageOperate != 1">
          <a-button type="primary" icon="search" @click="handleSearch()">
            查询
          </a-button>
          <a-button icon="sync" @click="handleReset()">重置</a-button>
        </div>
        <a-button class="back-button" @click="goBack()" v-if="isBackButton">
          返回
        </a-button>
      </div>
      <div class="result-body-warp">
        <div class="drawing-container">
          <div class="sub-header">
            {{ menuName }}
            <icon-font
              v-action="'table_add_' + moduleSource()"
              v-if="pageOperate != 3"
              type="icon-xinjianwenjianjia"
              class="add-file-button"
              @click="addFolder(0, '')"
            ></icon-font>
          </div>
          <div class="condition">
            <a-input placeholder="请输入关键字" v-model="keyWord" />
            <div class="search-btn">
              <a-icon type="search" @click="handleFilterTree()" />
            </div>
          </div>
          <div class="tree-container">
            <a-empty v-if="treeData.length == 0" :description="false" />
            <a-tree
              v-else
              v-model="checkedKeys"
              show-icon
              show-line
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="{
                children: 'children',
                title: 'nodeName',
                key: 'uuid',
              }"
              @expand="onExpand"
              @select="onSelect"
            >
              <!-- 自定义图标 -->
              <template slot="custom">
                <icon-font type="icon-wenjianjia-" />
              </template>
              <template
                slot="title"
                slot-scope="{
                  nodeName,
                  id,
                  uuid,
                  unit,
                  delBtn,
                  versionMain,
                  proCode,
                }"
              >
                <div class="custom-tree-title-warp">
                  <div class="title" :title="nodeName">
                    {{ nodeName }}
                  </div>
                  <div class="operate">
                    <!-- 新增 -->
                    <icon-font
                      type="icon-xinjianwenjianjia"
                      class="add-file-button"
                      @click.stop="addFolder(id)"
                      v-if="pageOperate != 3 && versionMain != 1"
                      v-action="'table_add_' + moduleSource()"
                    ></icon-font>
                    <!-- 编辑 -->
                    <a-icon
                      type="edit"
                      class="edit-btn"
                      @click.stop="editFolder(nodeName, uuid, unit, proCode)"
                      v-if="delBtn == 0 && pageOperate != 3"
                      v-action="'table_add_' + moduleSource()"
                    />
                    <!-- 删除 -->
                    <a-icon
                      type="delete"
                      class="delete-btn"
                      @click.stop="deleteFolder(uuid)"
                      v-if="delBtn == 0 && pageOperate != 3"
                      v-action="'table_add_' + moduleSource()"
                    />
                  </div>
                </div>
              </template>
            </a-tree>
          </div>
        </div>
        <!-- 列表 -->
        <div class="right-container">
          <div class="sub-header">
            <a-button
              type="primary"
              v-if="currentTreeNode.uploadBtn && pageOperate != 3"
              icon="cloud-upload"
              @click="uploadFolder()"
              v-action="'table_edit_' + moduleSource()"
            >
              上传
            </a-button>
            <a-button
              v-action="'table_edit_' + moduleSource()"
              v-if="currentTreeNode.zipBtn && pageOperate != 3"
              type="primary"
              icon="file-zip"
              @click="handleUploadZip({}, 1)"
            >
              导入压缩包
            </a-button>
            <a-button
              v-if="currentTreeNode.id"
              v-action="'down_load_' + moduleSource()"
              type="primary"
              icon="download"
              @click="handleDownloadZip()"
              :disabled="tableData.length > 0 ? false : true"
              :loading="downloadLoading"
            >
              {{ downloadLoading ? "下载中" : "下载" }}
            </a-button>
          </div>
          <div class="table-container">
            <!-- table -->
            <vxe-table
              ref="xTable"
              height="99%"
              align="center"
              show-overflow
              show-header-overflow
              border="inner"
              :data="tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="tableLoading"
            >
              <vxe-column type="seq" width="80" title="序号"></vxe-column>
              <vxe-column title="文件名称" field="fileName" min-width="300">
              </vxe-column>
              <vxe-column field="commentName" title="文件查看/下载" width="160">
                <template #default="{ row }">
                  <!-- 预览 -->
                  <a-tooltip placement="top">
                    <template slot="title">
                      预览
                    </template>
                    <a-icon
                      type="eye"
                      class="preview-btn"
                      @click="previewFile(row)"
                    />
                  </a-tooltip>
                  <!-- 下载 -->
                  <a-tooltip
                    placement="top"
                    v-action="'down_load_' + moduleSource()"
                  >
                    <template slot="title">
                      下载
                    </template>
                    <a-icon
                      type="download"
                      class="download-btn"
                      @click="downloadFile(row)"
                    />
                  </a-tooltip>
                </template>
              </vxe-column>
              <vxe-column field="createTime" title="上传时间" width="200">
              </vxe-column>
              <vxe-column field="creator" title="上传人" width="140">
              </vxe-column>
              <!-- dataSetId -->
              <vxe-column
                field="correlation"
                title="关联模型"
                width="130"
                v-if="![1, 5].includes(moduleSource())"
              >
                <template #default="{ row }">
                  <div
                    class="correlation-model"
                    :class="!row.dataSetId && 'no'"
                    v-if="row.previewWay == 'cad'"
                    @click="row.previewWay && viewModalCad(row)"
                  >
                    <icon-font
                      :type="
                        row.dataSetId ? 'icon-wancheng' : 'icon-weiwancheng'
                      "
                      class="location-button"
                    ></icon-font>
                    {{ row | relevanceText }}
                  </div>
                  <div v-else>-</div>
                </template>
              </vxe-column>
              <vxe-column
                field="operate"
                title="操作"
                fixed="right"
                width="130"
                align="left"
                v-if="pageOperate != 3"
              >
                <template #default="{ row }">
                  <div class="text-button-group">
                    <!-- 管理模型 -->
                    <a-tooltip placement="top" v-if="row.previewWay == 'cad'">
                      <template slot="title">
                        关联模型
                      </template>
                      <icon-fonts
                        icon="icon-guanlian"
                        @change="handleAgain(row)"
                      />
                    </a-tooltip>
                    <!-- 更新 -->
                    <a-tooltip
                      placement="top"
                      v-if="row.versionMain != 1"
                      v-action="'table_edit_' + moduleSource()"
                    >
                      <template slot="title">
                        更新
                      </template>
                      <icon-fonts
                        icon="icon-gengxin"
                        class="edit-btn"
                        @change="editFile(row)"
                      ></icon-fonts>
                    </a-tooltip>
                    <!-- 删除 -->
                    <a-tooltip
                      placement="top"
                      v-action="'file_delete_' + moduleSource()"
                      v-if="row.versionMain != 1"
                    >
                      <template slot="title">
                        删除
                      </template>
                      <a-icon
                        type="delete"
                        class="delete-btn"
                        @click="deleteFile(row.uuid)"
                      />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <!-- 分页 -->
          <div class="pager-container">
            <vxe-pager
              size="small"
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
              :page-sizes="[20, 50, 100, 500]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  共<span>{{ pager.total }}</span
                  >条
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增、编辑弹窗 -->
    <addModal
      :visible.sync="addModal.visible"
      :operate="addModal.operate"
      :pid="addModal.pid"
      :nodeName="addModal.nodeName"
      :proCode="addModal.proCode"
      @onRefresh="getDrawingTreeData()"
    ></addModal>
    <!-- 上传弹窗 -->
    <uploadModal
      :visible.sync="uploadModal.visible"
      :operate="uploadModal.operate"
      :treeItem="currentTreeNode"
      :parameter="uploadModal.row"
      @onRefresh="getRefresh()"
    ></uploadModal>
    <!-- 上传压缩包 -->
    <uploadZipModal
      :visible.sync="uploadZipModal.visible"
      :operate="uploadZipModal.operate"
      :parameter="uploadZipModal.row"
      :treeItem="currentTreeNode"
      @onRefresh="getRefresh()"
    ></uploadZipModal>
    <!-- 普通附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
    <!-- 关联模型 -->
    <associationModel
      :visible.sync="associationModel.visible"
      :row="associationModel.row"
      :proCode="associationModel.proCode"
      @change="associationModelChange()"
    ></associationModel>
  </inline-Modal>
</template>

<script>
import moment from "moment";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { addAttributeByKey, flatTreeData } from "@/utils/util.js";
import cloneDeep from "lodash.clonedeep";
import { axios } from "@/utils/request";

import { mapGetters } from "vuex";
import { getToken, downLoadBatchFileByArraybuffer } from "@/utils/TopVUI";

import { getProListTreeByQX } from "@/api/common";
import { exportZip, filterProjectTreeList } from "@/api/constructManage";
//新建弹窗
import addModal from "./addModal";
//上传弹窗
import uploadModal from "./uploadModal";
//上传压缩包
import uploadZipModal from "./uploadZipModal";
//关联模型
import associationModel from "./associationModel";
//预览
import previewModal from "@/pages/document/minio/previewModal";

export default {
  inject: ["moduleSource"],
  components: {
    IconFont,
    addModal,
    uploadModal,
    uploadZipModal,
    previewModal,
    associationModel,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //1新增 2编辑 3查看
    pageOperate: {
      type: [String, Number],
      default: 1,
    },
    //返回按钮
    isBackButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      //查询体条件
      condition: {
        //项目名称
        proCode: undefined,
        treeData: [],
        treeLoading: false,
        //文件名称
        fileName: undefined,
        //日期范围
        date: [],
        //上传人
        creator: "",
      },
      //table
      tableData: [],
      tableLoading: false,
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //图纸管理
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      cloneTreeData: [],
      currentTreeNode: {},
      keyWord: "",
      //新增编辑
      addModal: {
        visible: false,
        operate: 1,
        pid: "",
        nodeName: "",
        proCode: "",
      },
      //上传
      uploadModal: {
        visible: false,
        operate: 1,
        row: {},
      },
      //上传压缩包
      uploadZipModal: {
        visible: false,
        operate: 1,
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
      //下载
      downloadLoading: false,
      //管理模型
      associationModel: {
        visible: false,
        row: {},
        proCode: "",
      },
    };
  },
  computed: {
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  filters: {
    relevanceText(row) {
      let { dataSetId } = row;
      if (dataSetId) {
        return "已关联";
      } else {
        return "未关联";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          //图纸管理、深化设计、竣工阶段设计管理
          if ([0, 8, 9].includes(this.moduleSource())) {
            this.getProjectTreeData_1();
          }
          //工程勘察、方案设计、初步设计、施工图设计、专项设计
          if ([1, 2, 3, 4, 5].includes(this.moduleSource())) {
            this.getProjectTreeData_2();
          }
          //编辑、查看
          if (this.pageOperate != 1) {
            this.condition.proCode = this.parameter.proCode;
            this.getDrawingTreeData();
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    moment,
    //预览关联后的模型和cad
    viewModalCad(row) {
      let { dataSetId, componentId, fileName, uuid } = row;
      let domain = location.origin;
      window.open(
        `${domain}/#/blackHole/previewCadBim?dataSetId=${dataSetId}&nodeId=${componentId}&cadId=${uuid}&name=${fileName}`
      );
    },

    associationModelChange() {
      this.handleSearch();
    },
    //关联模型
    handleAgain(row) {
      let { proCode } = this.condition;
      this.associationModel.row = row;
      this.associationModel.proCode = proCode;
      this.associationModel.visible = true;
    },

    //压缩包下载
    handleDownloadZip() {
      let { id, nodeName } = this.currentTreeNode;
      if (!id) {
        return;
      }
      this.downloadLoading = true;
      exportZip({ classifyId: id })
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, nodeName);
        })
        .catch((_) => {})
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //压缩包上传
    handleUploadZip(row, type) {
      this.uploadZipModal.operate = type;
      this.uploadZipModal.row = row;
      this.uploadZipModal.visible = true;
    },

    //上传文件
    uploadFolder() {
      this.uploadModal.operate = 1;
      this.uploadModal.row = {};
      this.uploadModal.visible = true;
    },

    //文件编辑
    editFile(row = {}) {
      this.uploadModal.operate = 2;
      this.uploadModal.row = row;
      this.uploadModal.visible = true;
    },

    //文件删除
    deleteFile(uuid = "") {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            that
              .$post(`/probusiness/bimCadFile/deleteBatch?uuid=${uuid}`)
              .then((res) => {
                let { statusCode } = res;
                if (statusCode == 200) {
                  that.$message.success("删除成功！");
                  that.handleSearch();
                } else {
                  that.$message.error("删除失败，请稍后重试！");
                }
                resolve();
              })
              .catch((_) => {})
              .finally((_) => {});
          }).catch(() => console.log("Oops errors!"));
        },
      });
    },

    getRefresh() {
      this.getDrawingTreeData().then((res) => {
        this.handleSearch();
      });
    },

    //查询按钮
    handleSearch() {
      let { id } = this.currentTreeNode;
      let { proCode, creator, fileName, date } = this.condition;
      if (!proCode || !id) {
        return;
      }
      this.tableLoading = true;
      let { page, pageSize } = this.pager;
      axios
        .post(
          `/probusiness/bimCadFile/getPageSet?pageNo=${page}&pageSize=${pageSize}`,
          {
            classifyId: id,
            proCode,
            fileName,
            creator,
            startTime: date?.[0] ?? "",
            endTime: date?.[1] ?? "",
            type: this.moduleSource(),
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          this.tableData = data?.rows ?? [];
          this.pager.total = data?.totalCount ?? 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
          reject();
        })
        .finally((_) => {
          this.tableLoading = false;
        });
    },

    //重置
    handleReset() {
      let { treeData } = this.condition;
      let { pageOperate, parameter } = this;
      this.condition = {
        //项目名称
        proCode: pageOperate == 1 ? undefined : parameter.proCode,
        treeLoading: false,
        fileName: undefined,
        date: [],
        creator: "",
        treeData,
      };
      this.expandedKeys = [];
      this.autoExpandParent = true;
      this.checkedKeys = [];
      this.selectedKeys = [];
      this.treeData = [];
      this.cloneTreeData = [];
      this.tableData = [];
      this.currentTreeNode = {};
      //
      if (pageOperate != 1) {
        this.getDrawingTreeData();
      }
    },

    //查询项目列表-树形
    getProjectTreeData_1() {
      this.condition.treeLoading = true;
      return new Promise((resolve, reject) => {
        getProListTreeByQX()
          .then((res) => {
            let { data } = res;
            this.condition.treeData = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.treeData = [];
            reject();
          })
          .finally((_) => {
            this.condition.treeLoading = false;
          });
      });
    },

    //查询项目列表-树形
    getProjectTreeData_2() {
      this.condition.treeLoading = true;
      return new Promise((resolve, reject) => {
        filterProjectTreeList({ type: this.moduleSource() })
          .then((res) => {
            let { data } = res;
            this.condition.treeData = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.treeData = [];
            reject();
          })
          .finally((_) => {
            this.condition.treeLoading = false;
          });
      });
    },

    //监听项目切换
    tenantChange(value) {
      this.condition.fileName = "";
      this.condition.date = [];
      this.condition.creator = "";
      this.tableData = [];
      this.expandedKeys = [];
      this.autoExpandParent = true;
      this.checkedKeys = [];
      this.selectedKeys = [];
      this.treeData = [];
      this.cloneTreeData = [];
      this.tableData = [];
      this.currentTreeNode = {};
      this.getDrawingTreeData();
    },

    //查询图纸树形数据
    getDrawingTreeData() {
      let { proCode } = this.condition;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bimCadClassify/getTreeByProCode?proCode=${proCode}&type=${this.moduleSource()}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.cloneTreeData = cloneDeep(data ?? []);
            let flatData = flatTreeData(this.cloneTreeData, "children");
            this.expandedKeys = flatData.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              this.cloneTreeData,
              "children"
            );
            if (this.currentTreeNode.uuid) {
              this.selectedKeys = [this.currentTreeNode.uuid];
            }
            this.treeData = filterData ?? [];
            resolve();
          })
          .catch((_) => {
            this.expandedKeys = [];
            this.treeData = [];
            this.cloneTreeData = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询图纸管理树
    handleFilterTree() {
      let { keyWord, cloneTreeData } = this;
      let cloneData = cloneDeep(cloneTreeData);
      this.treeData = this.filterTree(cloneData, "children", (node) =>
        node.nodeName.includes(keyWord)
      );
    },

    //新建文件夹
    addFolder(id) {
      let { proCode } = this.condition;
      if (!proCode) {
        this.$message.warning("请先选择项目");
        return;
      }
      this.addModal.proCode = proCode;
      this.addModal.operate = 1;
      this.addModal.pid = id;
      this.addModal.nodeName = "";
      this.addModal.visible = true;
    },

    //编辑文件夹
    editFolder(nodeName, uuid, unit, proCode) {
      this.addModal.proCode = proCode;
      this.addModal.operate = 2;
      this.addModal.pid = uuid;
      this.addModal.nodeName = nodeName;
      this.addModal.visible = true;
    },

    //删除文件夹
    deleteFolder(uid = "") {
      let { uuid } = this.currentTreeNode;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            that
              .$post(`/probusiness/bimCadClassify/deleteData?uuid=${uid}`)
              .then((res) => {
                let { statusCode, message } = res;
                if (statusCode == 200) {
                  that.$message.success("删除成功！");
                  if (uuid == uid) {
                    that.currentTreeNode = {};
                    that.tableData = [];
                  }
                  that.getDrawingTreeData();
                } else {
                  that.$message.error(message ?? "删除失败，请稍后重试！");
                }
                resolve();
              })
              .catch((_) => {})
              .finally((_) => {});
          }).catch(() => console.log("Oops errors!"));
        },
      });
    },

    //文件预览
    previewFile(row = {}) {
      let { previewWay, uuid, fileInfo, unit, bhDataSetId, bhFileName } = row;
      let { fileName, url } = fileInfo;
      let domain = location.origin;
      switch (previewWay) {
        //cad预览
        case "cad":
          window.open(
            `${domain}/#/blackHole/previewCad?uuid=${uuid}&fileName=${fileName}&unit=${unit}`
          );
          return;
        // 模型预览
        case "model":
          bhDataSetId &&
            window.open(
              `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${bhFileName}`
            );
          return;
        // 普通文件预览
        case "kkview":
          this.previewModal.loading = true;
          this.$refs.previewModal.type = "file";
          this.$refs.previewModal.fileUrl =
            this.kkFileView +
            "/onlinePreview?url=" +
            encodeURIComponent(Base64.encode(url)) +
            "&watermarkTxt=" +
            //水印内容
            encodeURIComponent("") +
            "&token=" +
            getToken();
          this.previewModal.visible = true;
          this.previewModal.loading = false;
          return;
        default:
          break;
      }
    },

    //文件下载
    downloadFile(row = {}) {
      let { fileInfo } = row;
      let { url, fileName } = fileInfo;
      // 创建一个<a>元素
      const link = document.createElement("a");
      link.href = url; // 设置图片的URL
      link.download = fileName; // 设置下载后的文件名
      document.body.appendChild(link); // 将<a>元素添加到页面中
      link.click(); // 模拟点击<a>元素
      document.body.removeChild(link); // 移除<a>元素
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.handleSearch();
    },

    //监听树形选择
    onSelect(selectedKeys, info) {
      let { uuid } = info.node.dataRef;
      this.currentTreeNode = info.node.dataRef;
      this.selectedKeys = [uuid];
      this.pager.page = 1;
      this.pager.pageSize = 20;
      this.handleSearch();
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //返回
    goBack() {
      Promise.all([
        this.$parent.getColumnsHeader(),
        this.$parent.getTableData(),
      ]);
      this.$emit("update:visible", false);
    },

    //过滤树形数据
    filterTree(data, children = "children", filterFunc) {
      return data
        .filter((node) => {
          // 如果当前节点符合条件，直接返回true
          if (filterFunc(node)) {
            return true;
          }
          // 如果当前节点有子节点，递归过滤子节点
          if (node[children]) {
            node[children] = this.filterTree(
              node[children],
              children,
              filterFunc
            );
            // 如果过滤后的子节点不为空，说明当前节点需要保留
            return node[children].length > 0;
          }
          // 当前节点不符合条件，也没有子节点或子节点不符合条件，返回false
          return false;
        })
        .map((node) => {
          // 创建新对象，避免修改原始数据
          return {
            ...node,
            [children]: node[children]
              ? this.filterTree(node[children], children, filterFunc)
              : [],
          };
        });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.modal-full-layout {
  background-color: #f0f2f5;
  /deep/.header {
    display: none;
  }
  /deep/.main {
    padding: 0;
    overflow: hidden !important;
  }
  .wrapPage-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .search-condition-warp {
      background: #fff;
      margin-bottom: 10px;
      padding: 10px 16px;
      border-radius: 6px;
      flex-shrink: 0;
      display: flex;
      position: relative;
      .condition-warp {
        margin-right: 10px;
        .ant-select {
          margin-right: 10px;
        }
        .ant-input {
          margin-left: 10px;
        }
        .ant-calendar-picker {
          margin-left: 10px;
        }
      }
      .button-warp {
        button {
          &:not(:last-child) {
            margin-right: 10px;
          }
        }
      }
      .back-button {
        position: absolute;
        right: 16px;
      }
    }

    .result-body-warp {
      flex: 1;
      display: flex;
      overflow: hidden;
      .drawing-container {
        height: 100%;
        width: 300px;
        background: #fff;
        margin-right: 10px;
        border-radius: 6px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .sub-header {
          flex-shrink: 0;
          height: 56px;
          border-bottom: 1px solid #d9d9d9;
          display: flex;
          align-items: center;
          padding: 0 16px;
          align-items: center;
          justify-content: space-between;
          color: #333333;
          font-size: 16px;
          .add-file-button {
            color: #8c8c8c;
            font-size: 18px;
          }
        }
        .condition {
          flex-shrink: 0;
          padding: 16px 0 10px 0;
          display: flex;
          justify-content: center;
          position: relative;

          input {
            width: 268px;
            padding-right: 36px;
          }
          .search-btn {
            position: absolute;
            width: 30px;
            height: 28px;
            background: #fff;
            top: 18px;
            right: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #8c8c8c;
            font-size: 20px;
          }
        }
        .tree-container {
          flex: 1;
          overflow: auto;
          overflow-x: hidden;
          position: relative;
          padding: 0 10px 0 14px;
          /deep/.ant-tree {
            .ant-tree-node-content-wrapper {
              &:hover {
                .operate {
                  .anticon {
                    display: inline-block !important;
                  }
                }
              }
            }
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                position: relative;
                width: calc(100% - 25px);
                padding: 0;
                .ant-tree-iconEle {
                  color: #f3ab1f;
                  font-size: 16px;
                }
                .ant-tree-title {
                  overflow: hidden;
                  display: inline-block;
                  width: calc(100% - 26px);
                  .custom-tree-title-warp {
                    display: flex;
                    width: 100%;
                    .title {
                      flex: 1;
                      overflow: hidden;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                    .operate {
                      flex-shrink: 0;
                      margin-left: 8px;
                      color: #8c8c8c;
                      width: 59px;
                      .anticon {
                        display: none;
                      }
                      .add-file-button {
                        font-size: 15px;
                      }
                      .edit-btn {
                        margin: 0 8px;
                      }
                    }
                  }
                }
              }
            }
          }
          .ant-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .right-container {
        height: 100%;
        flex: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .sub-header {
          height: 60px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          padding: 0 16px;
          button {
            margin-right: 12px;
            &[disabled] {
              background-color: #f5f5f5 !important;
            }
          }
        }
        .table-container {
          flex: 1;
          overflow: hidden;
          .preview-btn {
            color: #1677ff;
            margin-right: 16px;
            font-size: 15px;
          }
          .download-btn {
            color: #239b53;
            font-size: 16px;
          }
          .edit-btn {
            color: #239b53;
            margin-right: 16px;
            font-size: 15px;
          }
          .delete-btn {
            color: #e43d3d;
            font-size: 15px;
          }

          .correlation-model {
            color: #1677ff;
            font-size: 14px;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
            .anticon {
              color: #239b53;
              margin-right: 6px;
            }
            &.no {
              text-decoration: none;
              cursor: default;
              .anticon {
                color: #ff2d2d;
              }
            }
            &.no {
              .anticon {
                color: #ff2d2d;
              }
            }
          }
        }
        .pager-container {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          flex-shrink: 0;
          height: 100px;
          padding-right: 10px;
        }
      }
    }
  }
}
</style>
